<template>
    <div id="single-blog">
        <h1>{{blog.title}}</h1>
        <article>{{blog.body}}</article>
        
        <p>作者：{{blog.author}}</p>
        <!-- <p>分类：</p>
        <ul>
            <li v-for="(category ,i)in blog.categories" :key="i">
                {{category}}
            </li>
        </ul> -->
        <button @click="deleteSingleBlog">删除</button>
        <router-link :to="'/edit/' + id">编辑</router-link>

    </div>
</template>

<script>
import axios from "../axios-config";
export default {
   
    name:"single-blog",
    data(){
        return{
            id:this.$route.params.id,
            blog:{}
        }
    },

    created(){
        // this.$http.get('https://jsonplaceholder.typicode.com/posts/' + this.id)
        // .then(function(data){
        //     this.blog = data.body;
        // })
        axios.get('/posts/' + this.id)
        .then((data) => {
            this.blog = data.data;
        })
    },
    methods: {
        deleteSingleBlog(){
            console.log(this.id),
            axios.delete('/posts/' + this.id)
            // .then(response => {this.$route.push({path:"/"})
            .then((res) => {
                if (res.status == 200 && res.statusText == 'OK'){
                    alert('删除成功！！')
                }
            }
            )
        }
    },
}
</script>

<style scoped>
    #single-blog{
        max-width: 960px;
        margin: 83px auto 20px;
        padding: 20px;
        background-color: #eee;
        border: 1px dotted #aaa;
    }
</style>